﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Rico Pull-Down Example</title>

<script src="../../src/rico.js" type="text/javascript"></script>
<script type='text/javascript'>
Rico.loadModule('Accordion','Corner');

var panel;
Rico.onLoad( function() {
  panel = Rico.SlidingPanel.top( $('outer_panel'), $('inner_panel'));
});
</script>

<style type="text/css">
body {
	font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
#header{
  margin: 0 10px;
  position: relative;
}
#top-panel {
  background-color : #6b795a;
  height: 17px;
  margin: 0px;
  padding:0px;
  position: relative;
  width: 570px;
  font-size: 8pt;
}
#inner_panel {
  position: relative;
  top: 0px;
  background-color: #adba8c;
  margin:0px;
  border: 1px solid #6b795a;
}
#outer_panel {
  overflow: hidden;
  position: absolute;
  z-index: 1;
  padding-left: 15px;
  top: 17px;
  width: 530px
}
pre {font-size: 11px;}
a img { border: none;vertical-align:top; }
a { 
  text-decoration:none; 
  color: Bisque;
}
</style>
</head>

<body>

<h1 style='float:left;'>Rico Pull-Down Example</h1>
<p style='float:right;'>
<a href="http://validator.w3.org/check?uri=referer"><img style='border:none;'
    src="images/valid-html401.png"
    alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
</p>

<div id="header" style='clear:both;'>
  <div id="top-panel">
    <a href="javascript:void(0);" onclick="panel.toggle(); return false;">
        <img alt="code" src="images/down_arrow.png">
    &nbsp;View the code...
    </a>
  </div>
	<div id="outer_panel">
		<div id="inner_panel">
	    <div style="font-size:14px">
	    Pull down demonstration</div>
	    <br><br>
<pre>
var panel = Rico.SlidingPanel.top( $('outer_panel'), $('inner_panel'));
//
panel.toggle();
</pre>
<br>
   	</div>
  </div>
</div>

<p>Welcome to Rico!

</body>
</html>